<template>
  <div class="container">
    <!-- 头部 -->
    <header>
      <!-- 选择 -->
      <select class="fl">
        <option>成都</option>
        <option>广州</option>
        <option>北京</option>
      </select>
      <!-- 输入框 搜索 -->
      <div class="search fl">
        <!-- <input type="image" src="images/ss.jpg">
        <input type="text" name="search" placeholder="寻找您的爱巢">-->
        <a href="brand.html">
          <img src="images/ss.png" />
          <span>寻找您的爱巢</span>
        </a>
      </div>
      <!-- 扫码 -->
      <img class="fr" src="images/shaoma.jpg" />
      <div class="clear"></div>
    </header>
    <div class="weather" v-html="html"></div>
    <!-- 广告 轮播 -->
    <section class="banner">
      <swiper :options="swiperOption" v-if="imgList.length">
        <swiper-slide v-for="(item,index) in imgList" :key="index">
          <img :src="item.imgPath" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </section>
    <nav class="navtop">
      <ul>
        <li>
          <a href="#">
            <img src="images/logo1.jpg" />
            <p>整租</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/logo2.jpg" />
            <p>合租</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/logo3.jpg" />
            <p>资讯</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/logo1.jpg" />
            <p>新房源</p>
          </a>
        </li>
      </ul>
    </nav>
    <section class="content">
      <h1>本期优选</h1>
      <div class="select">
        <div class="left fl">
          <img src="images/1.jpg" />
        </div>
        <div class="right fr">
          <img src="images/2.jpg" />
          <img src="images/3.jpg" />
        </div>
        <div class="clear"></div>
      </div>
      <h1>
        周边推荐
        <a href="#" class="fr">更多></a>
      </h1>
      <!-- <img src="images/4.jpg"> -->
      <!-- 地图 -->
      <!-- <div class="map" id="allmap" style="width: 100%;height: 3.29rem;overflow: hidden;margin:0"></div> -->
      <baidu-map
        class="map-container"
        v-bind="mapOptions"
        @ready="mapReady"
        @load="mapLoad"
        style="width: 100%;height: 3.29rem;overflow: hidden;margin:0"
      >
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
        <bm-map-type
          :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
          anchor="BMAP_ANCHOR_TOP_LEFT"
        />
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
      </baidu-map>
      <h1>精选好房</h1>
      <ul class="c">
        <li>
          区域
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          租金
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          户型
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          筛选
          <span class="icon">&#xe6aa;</span>
        </li>
      </ul>
      <ul class="case">
        <li v-for="(val,index) in baseHouse" :key="index">
          <router-link :to="{name:'detail',params:{hid:val.hid,type:'good'}}">
            <a href="javascript:;">
              <img :src="val.cover" class="fl" />
              <div class="text fr">
                <h1>{{val.name}}</h1>
                <p>{{val.desc}}</p>
                <ul>
                  <li
                    v-for="(v,k) in val.tag"
                    :key="k"
                    :class="v.status==='active'?'active':''"
                  >{{v.name}}</li>
                </ul>
                <p>
                  {{val.rentMoney}}
                  <span>元/月</span>
                </p>
              </div>
            </a>
          </router-link>
        </li>
      </ul>
      <p
        style="text-align:center; margin-bottom: 2rem;font-size: .4rem;"
        @click="getMore"
      >{{loadMore}}</p>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
import $ from "jquery";
// import BMap from 'vue-baidu-map'
import {
  BaiduMap,
  BmScale,
  BmMapType,
  BmNavigation,
} from "vue-baidu-map/components";
// 加载异步请求数据模块axios
// import axios from 'axios';
//默认输出一个组件对象
export default {
  // 组件名称
  name: "index",
  // 加载页面的子组件（也没面分离的内容）
  components: {
    BaiduMap,
    BmScale,
    BmMapType,
    BmNavigation,
  },
  data() {
    return {
      // 定义变量
      swiperOption: {
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        }, //l轮播间隔时间
        loop: true, //是否自动轮播
        pagination: {
          el: ".swiper-pagination",
        }, //轮播图中下标点显示
        paginationClickable: true, //轮播图中下标点显示
      },
      // 广告轮播图数据
      imgList: [],
      loadMore: "加载更多",
      pn: 1, //页码
      mapOptions: {
        ak: "9N7pUjbkmkI4X5HdwGZqzTBYuaKvnV7z",
        center: "广州",
        scrollWheelZoom: true,
      },
    };
  },
  // 生命周期
  mounted() {
    // console.log(this)
    let _this = this;
    // 组件加载渲染前就会执行
    this.$axios({
      method: "get",
      url: "/data/ad_data.json",
    })
      .then(function (res) {
        // 请求成功
        // console.log(res);
        let data = res.data;
        // console.log(data);

        // 给data的变量赋值
        if (data.code == 200) {
          _this.imgList = data.index_ad;
        }
      })
      .catch((error) => {
        console.log(error);
      });
    this.$store.dispatch("getBestHouse", this.pn); //获取BestHouse房源数据

    // 天气缓存
    let weather = localStorage.getItem("weather");
    //获取存储的时间戳
    let wather_json = "";
    let weatherTime = "";
    if (weather) {
      wather_json = JSON.parse(weather);
      weatherTime = JSON.parse(weather).time;
      console.log(wather_json);
      // console.log(weatherTime)
    }
    //每小时刷新
    if (weather && new Date().getTime() - weatherTime < 1000 * 60 * 60 * 1) {
      // 不需要请求了，直接显示存储的数据
      let wather_json = JSON.parse(weather);
      console.log(wather_json.str);
      $(".weather").prepend(wather_json.str);
    } else {
      // 没有存储数据，那么就去请求
      $.ajax({
        url: "http://wthrcdn.etouch.cn/weather_mini?citykey=101280101",
        type: "get", // post
        dataType: "jsonp", // 数据请求类型
        success: function (data) {
          //请求成功后，执行这个回调函数
          console.log(data);
          if (data.status == 1000) {
            //实时温度
            let wendu = data.data.wendu;
            let currentTime = data.data.forecast[0].date; //当天时间
            let temperature =
              data.data.forecast[0].low + data.data.forecast[0].high; //温度范围
            let weather = data.data.forecast[0].type; //天气
            let fengxiang = data.data.forecast[0].fengxiang; //风向
            let fengli = data.data.forecast[0].fengli; //风力<![CDATA[3级]]>
            fengli = fengli.match(/CDATA\[(\S*)\]\]/)[1]; //截取风力
            let currentCity = data.data.city; //城市
            let str = `
                <div class="temperature" v-html="html">
                    ${wendu}
                    <span>℃<span>
                </div>
                <div class="weather-info">
                    <P>${currentTime}</P>
                    <P>${currentCity} ${temperature}</P>
                    <P>${fengxiang} ${fengli}</P>
                </div>
                <div class="weather-img">${weather}</div>`;
            $(".weather").prepend(str);
            console.log(str);
            let json = {
              str: str,
              time: new Date().getTime(), // 记录的当前时间戳
            };
            // console.log(json);
            let json_str = JSON.stringify(json);
            //存储起来
            localStorage.setItem("weather", json_str);
          }
        },
      });
    }
  },
  created() {},
  updated() {},
  destroyed() {},
  methods: {
    // 事件的函数
    getMore() {
      // 做分页，加载列表更多数据（去调用中间件的getHouse方法）
      let arr = this.$store.state.index.bestHouse;
      let total = this.$store.state.index.houseTotal;
      if (arr.length >= total) {
        return; // 阻止执行
      }
      this.$store.dispatch("getBestHouse", ++this.pn);
    },

    // 百度地图
    mapReady(e) {
      console.log("地图准备好了" + e);
    },
    mapLoad(e) {
      console.log("地图加载" + e);
    },
  },
  computed: {
    // 计算属性：当不想再模板里进行属性的逻辑运算是可以利用计算属性避免模板中过多使用表达式
    baseHouse() {
      // 定义baseHouse变量
      return this.$store.state.index.bestHouse;
    },
  },
  watch: {
    //监听属性，监听属性的值，当值变化时会实时更新熟悉那个值，当值发生变化时触发
    baseHouse() {
      let arr = this.$store.state.index.bestHouse;
      let total = this.$store.state.index.houseTotal;
      if (arr.length >= total) {
        this.loadMore = "我是底线的";
      }
    },
  },
};
</script>
<style scoped lang="less" rel="stylesheet/less">
header {
  height: 0.7rem;
  margin: 0.35rem 0.25rem 0;
  font-size: 0.28rem;
}

header select {
  width: 1rem;
  background-color: #fff;
  border: none;
  margin-top: 0.15rem;
  outline: none;
  font-family: inherit;
  font-size: 0.28rem;
}

header select option {
  border: none;
  background-color: #fff;
  outline: none;
}

header .search {
  width: 5rem !important;
  height: 0.7rem;
  background-color: #f7f7f7;
  position: relative;
  left: 0.1rem;
}

header .search input[type="image"] {
  width: 0.24rem;
  height: 0.24rem;
  position: relative;
  left: 0.33rem;
  top: 0.25rem;
}

header .search input[type="text"] {
  background-color: #f7f7f7;
  border: none;
  font-family: inherit;
  position: relative;
  left: 0.5rem;
  top: 0.2rem;
}

header .search a {
  width: 100%;
  height: 100%;
  display: block;
}

header .search img {
  width: 0.24rem;
  height: 0.24rem;
  position: relative;
  left: 0.33rem;
  top: 0.25rem;
}

header .search span {
  position: relative;
  left: 0.5rem;
  top: 0.2rem;
  color: #9e9e9e;
}

header > img {
  width: 0.38rem;
  height: 0.38rem;
  margin-top: 0.13rem;
}

.banner {
  margin-top: 0.2rem;
}

.navtop ul {
  display: flex;
  justify-content: space-around;
  margin: 0.4rem 0.42rem 0;
}

.navtop ul li {
  /*width: 1rem;*/
  width: 25%;
  height: 1.1rem;
  text-align: center;
}

.navtop ul li a {
  width: 100%;
  height: 100%;
  display: block;
}

.navtop ul li img {
  width: 0.46rem;
  height: 0.46rem;
  display: block;
  margin: 0 auto;
}

.navtop ul li p {
  color: #5e5e5e;
  font-size: 0.28rem;
  margin-top: 0.18rem;
}

.content {
  margin: 0 0.24rem 1.2rem;
}

.content > h1 {
  font-size: 0.48rem;
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.content > h1 > a {
  font-size: 0.28rem;
  line-height: 0.48rem;
  display: inline-block;
  color: #7d7d7d;
  margin-top: 0.1rem;
  font-weight: normal;
}

.content .select {
  width: 100%;
  max-height: 3.42rem;
}

.content img {
  width: 100%;
  display: block;
}

.content .select .left {
  width: 3.37rem;
}

.content .select .right {
  width: 3.35rem;
}

.content .select .right > img:nth-child(2) {
  margin-top: 0.22rem;
}
</style>
<style lang="less" rel="stylesheet/less">
/* 天气 */

.weather {
  display: flex;
  width: 6.9rem;
  height: 1.2rem;
  border-radius: 0.6rem;
  background-color: #c6ebff;
  font-size: 0.16rem;
  padding-top: 0.1rem;
  box-sizing: border-box;
  /* color: #fff; */
  margin: 0 auto;
  margin-top: 0.2rem;
}

.temperature {
  font-size: 0.7rem;
  width: 2rem;
  text-align: center;
  margin-right: 0.2rem;
}

.temperature span {
  font-size: 0.6rem;
  position: relative;
  top: 0.05rem;
}

.weather-info {
  flex: 3;
}

.weather-info p {
  line-height: 0.35rem;
}

.weather-img {
  flex: 2;
  text-align: center;
  line-height: 0.6rem;
}

.weather-img img {
  display: block;
  width: 0.7rem;
  height: 0.5rem;
  margin: 0 auto;
}
</style>